/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import { withRouter, Link } from 'react-router-dom';
import { Input, Button, Checkbox, Message } from '@alifd/next';
//import { LoginService } from '../../services/LoginService'
import axios from 'axios'
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import IceIcon from '@icedesign/foundation-symbol';

@withRouter
class UserLogin extends Component {
  static displayName = 'UserLogin';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      value: {
        username: '',
        password: '',
        checkbox: false,
      },
    };
  }

  onLogin = async(form) =>{
    return await LoginService.login(form.account, form.password,false,'');
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  };

  // handleSubmit = (e) => {
  //   e.preventDefault();
  //   this.refs.form.validateAll((errors, values) => {
  //     if (errors) {
  //       console.log('errors', errors);
  //       return;
  //     }
  //     console.log(values);
  //     Message.success('登录成功');
  //     this.props.history.push('/');
  //   });
  // };

  handleSubmit = () => {
    this.props.history.push('/dashboard');
    // let api = "http://www.sohojoy.com/tlogin/admin/admin/8";
    // axios.get(api)
    //     .then((response)=>{
    //         console.log(response.data.result)
    //         this.setState({
    //             list:response.data.result
    //         })
    //     }).catch(function (error) {
    //     console.log(error);
    //     });

    // this.setState({loading : true})
    // this.refs.form.validateAll( async(errors, values) => {
    //   if (errors) { 
    //     this.setState({loading : false}); 
    //     return; 
    //   }

    //   let flag = false
    //   try { 
    //     flag = await this.props.onLogin(values) 
    //   } 
    //   catch (error)
    //   { }
      
    //   if(flag){
    //     //Feedback.toast.success('登录成功');
    //     this.props.history.push('/dashboard');
        
    //     //hashHistory.push('/home/dashboard');
    //   }else{
    //     //Feedback.toast.error('登录失败, 请检查您输入的账户密码是否正确');
    //   }
    //   this.setState({loading : false})
    // });
  };

  render() {
    return (
      <div style={styles.container}>
        <h4 style={styles.title}>登 录</h4>
        <IceFormBinderWrapper
          value={this.state.value}
          onChange={this.formChange}
          ref="form"
        >
          <div style={styles.formItems}>
            <div style={styles.formItem}>
              <IceIcon type="person" size="small" style={styles.inputIcon} />
              <IceFormBinder name="username" required message="必填">
                <Input
                  size="large"
                  maxLength={20}
                  placeholder="用户名"
                  style={styles.inputCol}
                />
              </IceFormBinder>
              <IceFormError name="username" />
            </div>

            <div style={styles.formItem}>
              <IceIcon type="lock" size="small" style={styles.inputIcon} />
              <IceFormBinder name="password" required message="必填">
                <Input
                  size="large"
                  htmlType="password"
                  placeholder="密码"
                  style={styles.inputCol}
                />
              </IceFormBinder>
              <IceFormError name="password" />
            </div>

            <div style={styles.formItem}>
              <IceFormBinder name="checkbox">
                <Checkbox style={styles.checkbox}>记住账号</Checkbox>
              </IceFormBinder>
            </div>

            <div style={styles.footer}>
              <Button
                type="primary"
                size="large"
                onClick={this.handleSubmit}
                style={styles.submitBtn}
              >
                登 录
              </Button>
              <Link to="/user/register" style={styles.tips}>
                立即注册
              </Link>
            </div>
          </div>
        </IceFormBinderWrapper>
      </div>
    );
  }
}

const styles = {
  container: {
    width: '400px',
    padding: '40px',
    background: '#fff',
    borderRadius: '6px',
  },
  title: {
    margin: '0 0 40px',
    color: 'rgba(0, 0, 0, 0.8)',
    fontSize: '28px',
    fontWeight: '500',
    textAlign: 'center',
  },
  formItem: {
    position: 'relative',
    marginBottom: '20px',
  },
  inputIcon: {
    position: 'absolute',
    left: '12px',
    top: '12px',
    color: '#666',
  },
  inputCol: {
    width: '100%',
    paddingLeft: '20px',
  },
  submitBtn: {
    width: '100%',
  },
  tips: {
    marginTop: '20px',
    display: 'block',
    textAlign: 'center',
  },
};

export default UserLogin;
